<script setup>
import { ref,watch } from "vue"
import SendEl from "./send.vue"
import MessageEl from "../../components/message.vue"
// import RobotEl from "../../components/robot.vue"
import GroupEl from "./group.vue"

const {main} = defineProps(['main'])
// 获取groupId ? path | location | storage | api

const messageRef = ref();
watch(main.chatData,(d) => {
    messageRef.value.scrollTo({top:messageRef.value.scrollHeight,behavior:'smooth'})
})

</script>

<template>
    <div class="w-full h-full _content flex-1 overflow-hidden relative">
        <div class="w-80%  m-x-auto h-full flex flex-col">
            <!-- message -->
            <div ref="messageRef" class="flex-1 flex flex-col gap-20 overflow-auto scrollbar-thin p-x-10">
                <template v-for="(t,i) in main.msgs" :key="t.id">
                    <MessageEl :main="main" :data="t" :index="i"></MessageEl>
                    <!-- <RobotEl v-else :main="main" :data="t" :index="i"></RobotEl> -->
                </template>

            </div>

            <!-- send -->
            <div class="w-full h-fit">
                <SendEl :main="main"></SendEl>
            </div>
        </div>
        <div :class="['absolute left-0 top-0 h-90% w-160 backdrop-blur-20 z-999 rd-8 bg-#ffffff88 transition-all shadow-lg',main.hisDialog.value ? 'op-100 translate-x-10' : 'op-0 translate-x--100%']">
            <GroupEl :main="main"></GroupEl>
        </div>
    </div>
</template>

<style></style>